<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
	<meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <title>终端详情</title>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
    <link rel="stylesheet" th:href="@{/css/admin/b-terminal-detail.css}">
</head>

<body>
<div class="app-page">
    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-head">
                <div class="border"></div>
                <div class="app-card-title">终端详细信息</div>
            </div>
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-default edit">编辑</button>
                        <button class="j-btn-control z-btn z-default save" disabled>保存</button>
                    </div>

                    <div class="info-con">
                        <div class="info-item">
                            <div class="label">终端序列号</div>
                            <div class="info-val" id="deviceCode" th:text="${device.deviceCode}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">创建时间</div>
                            <div class="info-val" th:text="${device.createTime}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">在线状态</div>
                            <div class="info-val" th:text="${device.deviceStatus}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">设备mac</div>
                            <div class="info-val" id="deviceMac" th:text="${device.deviceMac}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">机型</div>
                            <div class="info-val" th:text="${device.deviceModel}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">所属分组</div>
                            <div class="info-val" th:text="${device.groupName}"></div>
                        </div>
                        <div class="info-item editable" data-type="deviceName">
                            <div class="label">设备名</div>
                            <div class="info-val" th:text="${device.deviceName}"></div>
                        </div>
                        <div class="info-item editable" data-type="province_select">
                            <div class="label">省份</div>
                            <div class="info-val" th:text="${device.province}"></div>
                        </div>
                        <div class="info-item editable" data-type="city_select">
                            <div class="label">城市</div>
                            <div class="info-val" th:text="${device.city}"></div>
                        </div>
                        <div class="info-item editable" data-type="area_select">
                            <div class="label">区/县</div>
                            <div class="info-val" th:text="${device.area}"></div>
                        </div>
                        <div class="info-item editable" data-type="detailAddr">
                            <div class="label">详细地址</div>
                            <div class="info-val" th:text="${device.detailAddr}"></div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-head">
                <div class="border"></div>
                <div class="app-card-title">版本信息</div>
            </div>
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <div class="info-con">
                        <div class="info-item">
                            <div class="label">mips版本</div>
                            <div class="info-val" th:text="${device.softwareVersion}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">mips升级时间</div>
                            <div class="info-val" th:text="${device.softwareUpgradeTime}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">固件版本</div>
                            <div class="info-val" th:text="${device.firmwareVersion}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">固件升级时间</div>
                            <div class="info-val" th:text="${device.firmwareUpgradeTime}"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-head">
                <div class="border"></div>
                <div class="app-card-title">策略信息</div>
            </div>
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <div class="info-con">
                        <div class="info-item">
                            <div class="label">开机时间</div>
                            <div class="info-val" th:text="${device.timeBoot}" ></div>
                        </div>
                        <div class="info-item">
                            <div class="label">关机时间</div>
                            <div class="info-val" th:text="${device.timeShutdown}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">开屏时间</div>
                            <div class="info-val" th:text="${device.timeBootScreen}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">关屏时间</div>
                            <div class="info-val" th:text="${device.timeShutdownScreen}"></div>
                        </div>
                        <div class="info-item">
                            <div class="label">音量</div>
                            <div class="info-val" th:text="${device.deviceVolume}"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="app-card">
            <div class="app-card-head">
                <div class="border"></div>
                <div class="app-card-title">节目信息</div>
            </div>
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <table class="z-table">
                        <thead>
	                        <th>节目名称</th>
	                        <th>状态</th>
	                        <th>播放时长（s)</th>
	                        <th>操作</th>
                        </thead>
                        <tbody>
	                        <tr th:each="program: ${device.programQueue}">
	                            <td th:text="${program.programName}"></td>
	                            <td th:text="${program.state}"></td>
	                            <td th:text="${program.duration/1000}"></td>
	                            <td><a th:onclick="'javascript:del(\''+${program.programVersion}+'\')'" >删除</a></td>
	                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/admin-upload.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/address-0.0.3.js}"></script>
<script>
	var context = $("meta[name='ctx']").attr("content");
   $('.edit').click(function () {
	   $('.edit').attr("disabled",'disabled'); 
	   $('.save').removeAttr("disabled");
        var $infoCon = $(this).parents('.app-card-body-con').eq(0).find('.info-con');

        if ($infoCon.find('input[type=text]').length <= 0) {

            var $infoVals = $infoCon.find('.editable');
            var province = '';
            var city = '';
            var area = '';
            $infoVals.each(function (val, index) {

                var editType = $(this).data('type');
                if (editType == 'province_select') {
                	province = $(this).find('.info-val').html();
                    var inputHtml = '<select id="province" class="select-province"><option value="">请选择</option></select>';
                    $(this).find('.info-val').html(inputHtml)
                }else if (editType == 'city_select') {
                	city = $(this).find('.info-val').html();
                	 var inputHtml = '<select id="city" class="select-city"><option value="">请选择</option></select>';
	                 $(this).find('.info-val').html(inputHtml)
                }else if (editType == 'area_select') {
                	area = $(this).find('.info-val').html();
                	 var inputHtml = '<select id="area" class="select-district"><option value="">请选择</option></select>';
	                 $(this).find('.info-val').html(inputHtml)
                }else if (editType == 'detailAddr'){
                    var inputHtml = '<input type="text" id="detailAddr" value="' + $(this).find('.info-val').html() + '"/>';
                    $(this).find('.info-val').html(inputHtml)
                }else if (editType == 'deviceName'){
                    var inputHtml = '<input type="text" id="deviceName" value="' + $(this).find('.info-val').html() + '"/>';
                    $(this).find('.info-val').html(inputHtml)
                }


            })
            
        }
     	// 省市区
        $(".info-con").address({
            provinceText: '选择省',
            cityText: '选择市',
            districtText: '选择区',
            apiUrl: 'http://xc-dmp.37226.com/api/area',
            // 默认值
            defaultProvince: province,
            defaultCity: city,
            defaultDistrict: area,
        });
    })

    $('.save').click(function () {
    	$('.edit').removeAttr("disabled");
    	var province = $("#province").val();
        var city = $("#city").val();
        var area = $("#area").val();
        var detailAddr = $("#detailAddr").val();
        var deviceName = $("#deviceName").val();
        var deviceMac = $("#deviceMac").html();
        var deviceCode = $("#deviceCode").html();

        $infoVals = $(this).parents('.app-card-body-con').eq(0).find('.info-con').find('input[type=text]');
        $infoVals.each(function () {
            $(this).parent('.info-val').html($(this).val())
        })
		
        $.ajax({
            type: "POST",
            url: context + "/cpDeviceInfo/detail/update/"+deviceCode,
            data: { province: province, city: city, area: area, detailAddr: detailAddr, deviceName : deviceName},
            dataType: "json",
            success: function (result) {
                alert(result.msg);
                if(result.code == 0) {
	                window.location.href = context + "/cpDeviceInfo/detail?deviceCode="+deviceCode;
                }
            },
            error : function (){
            	alert("系统异常，请稍候再试");
            }
        });
    })
    
    // 删除节目
    function del(programVersions) {
	   var deviceCode = $("#deviceCode").html();
    	$.ajax({
            type: "POST",
            url: context + "/cpProgram/batchDeleteProgramFromDevice/",
            data: { programVersions: programVersions,deviceCode:deviceCode},
            dataType: "json",
            success: function (result) {
                if(result.code == 0) {
                	alert("删除成功，请稍后刷新查看节目播放状态");
	                window.location.href = context + "/cpDeviceInfo/detail?deviceCode="+deviceCode;
                }else {
                	alert(result.msg); 
                }
            },
            error : function (){
            	alert("系统异常，请稍候再试");
            }
        });
    }
</script>
<script th:src="@{/lib/flatpickr/flatpickr.js}" ></script>
<script th:src="@{/lib/flatpickr/zh.js}"></script>
</body>

</html>